/* 元素选择 */
//首页
const first = document.querySelector(".contentBody .first")
//内容
const content = document.querySelector(".contentBody .content")
//左侧列表
const leftList = document.getElementById('renderLeftList')
//首页
const index = document.getElementById("index")
//大标题
const Title = document.getElementById("contentTitle")
//描述
const Describe = document.getElementById("contentDescribe")
//各项内容
const subclass = document.querySelector(".content .content-sub")
//url引入
const httpsUrl = document.getElementById("httpsUrl")
//本地引入
const libUrl = document.getElementById("libUrl")
const libUrl2 = document.getElementById("libUrl2")
const libUrl3 = document.getElementById("libUrl3")

let isFirst = true
//点击首页
Listener(index, "click", () => {
  if (isFirst) return
	first.style.display = "block"
	content.style.display = "none"
	isFirst = true
})
//点击下载
AllListener("#downloadFile", "click", () => location.href = downloadPath)

/* 渲染首页引入方式 */
httpsUrl.innerText = urlImport
libUrl.innerText = libImport
libUrl2.innerText = libImport2
libUrl3.innerText = libImport3

/* 渲染左侧页面 */
renderLeftList()
function renderLeftList() {
  leftList.innerHTML = listData.map(item => `<li onclick="listClick('${item.id}')"><p>${item.name}</p></li>`).join("")
}
//每个列表点击
function listClick(id) {
  document.documentElement.scrollTop = 0
	first.style.display = "none"
	content.style.display = "block"
	isFirst = false
	contentRender(id)
}

/* 渲染内容 */
function contentRender(id) {
  const item = Arr.getObjFilter(listData,{id})[0]
  Title.innerHTML = `${item.name}<span style="font-size:18px">&nbsp&nbsp&nbsp&nbsp类型：${item.type} (${item.typeText})</span>`
  Describe.innerHTML = item.describe
  subclass.innerHTML = item.data.map((subItem,index) => {
    let str = `
    <div ${subItem.name?'style="height:70px"':""} class="content-subclass" id="content-subclass-${index}">`
    if (subItem.name) str += `<h3><span><span class="subclass-term">${subItem.isVar?"变量名":"方法名"}:</span>${subItem.name}</span><span onclick="fold(${index})" class="subclass-fold-btn">▲</span></h3>`
    if (subItem.describe) str += `<h4><span class="subclass-term">描述</span>${subItem.describe}</h4>`
    if (subItem.parameter) {
      str += `<h4><span class="subclass-term">参数</span>
          <div>`
      str += subItem.parameter.map((parameterItem,index) => {
        let temp = ''
        if (parameterItem.name) temp += `<p class="formalParameter">形参${subItem.parameter.length===1?'':index+1}：${parameterItem.name}</p>`
        if (parameterItem.type) temp += `<p class="formalParameterType">类型：${parameterItem.type}</p>`
        if (parameterItem.describe) temp += `<p class="formalParameterType">描述：${parameterItem.describe}</p>`
        if (parameterItem.default) temp += `<p class="formalParameterText">默认值：${parameterItem.default}</p>`
        return temp
      }).join("")
      str += `</div></h4>`
    }
    if (subItem.return) {
      str += `
      <h4><span class="subclass-term">返回值</span>
        <div>`
      str += subItem.return.map(returnItem => {
        let temp = ''
        if (returnItem.type) temp += `<p class="formalParameter">类型：${returnItem.type}</p>`
        if (returnItem.describe) temp += `<p class="formalParameterText">描述：${returnItem.describe}</p>`
        return temp
      }).join("")
      str += `</div></h4>`
    }
    if (subItem.callback) {
      str += `
      <h4><span class="subclass-term">回调函数</span>
        <div>`
      str += subItem.callback.map(callbackItem => {
        let temp = ''
        if(callbackItem.name) temp += `<p class="formalParameter">${callbackItem.name}</p>`
        if(callbackItem.describe) temp += `<p class="formalParameterText">描述：${callbackItem.describe}</p>`
        return temp
      }).join("")
      str += `</div></h4>`
    }
    if (subItem.callbackParameter) {
      str += `
      <h4><span class="subclass-term">回调函数参数</span>
        <div>`
      str += subItem.callbackParameter.map(callbackParameterItem => {
        let temp = ''
        if(callbackParameterItem.name) temp += `<p class="formalParameter">${callbackParameterItem.name}</p>`
        if(callbackParameterItem.from) temp += `<p class="formalParameterText">来源函数：${callbackParameterItem.from}</p>`
        if(callbackParameterItem.type) temp += `<p class="formalParameterText">类型：${callbackParameterItem.type}</p>`
        if(callbackParameterItem.describe) temp += `<p class="formalParameterText">描述：${callbackParameterItem.describe}</p>`
        return temp
      }).join("")
      str += `</div></h4>`
    }
    if (subItem.example) {
      str += `
        <h4><span class="subclass-term">示例</span>
          <div>`
      str += subItem.example.map(exampleItm => {
        return `<p class="formalParameter">${exampleItm}</p>`
      }).join("")
      str += `</div></h4>`
    }
    str += `</div>`
    return str
  }).join("")
}
function fold(index) {
  const box = document.querySelector(`#content-subclass-${index}`)
  const boxHeight = box.style.height
  if (boxHeight) box.style.height = "" 
  else box.style.height = "70px"
}
